<template>
  <el-dialog v-model="visible" width="650px" title="添加整栋" @close="handleClose" :fullscreen="deivce === 'mobile'">
    <el-form :model="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12" :xs="22">
          <el-form-item prop="group" label="分组">
            <el-select v-model="form.group" :options="groupOptions"></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="buildingName" label="整栋名称">
            <el-input v-model="form.buildingName" placeholder="请输入整栋名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="floorsCount" label="总层数">
            <el-select v-model="form.group" :options="groupOptions" suffix-icon="层"></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="buildingName" label="整栋名称">
            <el-input v-model="form.buildingName" placeholder="请输入整栋名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script setup name="AddEntireBuilding">
import useAppStore from '@/store/modules/app'

const props = defineProps({
  value: {
    type: Boolean,
    default: false
  }
})
const groupOptions = ref([{
  label: '分组一',
  value: 1
}])

const data = reactive({
  form: {
    group: undefined,
    buildingName: undefined
  }
})
const { form } = toRefs(data)

const emit = defineEmits()
const visible = computed({
  get: () => props.value,
  set: (val) => {
    emit('value:update', val)
  }
})
const deivce = computed(() => useAppStore().device)

function handleClose(value) {
  emit('cancel')
}
</script>